<template>
  <div id="zqhgApply">
    <div class="homeTitle">债券回购交易申请</div>
    
    <div class="tableBox">
      <div>
        <div class="tableTitle">申请人信息： </div>
      <el-form class="formlist" :model="formData1"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList1" :key="item.label" :label="item.label" :prop="item.prop">
                    {{formData1[item.prop]}}
                    </el-form-item>
           </el-form>
      </div>
       <div >
         <div class="tableTitle">交易详情： </div>
          <el-form class="formlist" :model="formData2"  :inline="true" :rules="rules">
                    <el-form-item v-for="item in formList2" :key="item.label" :label="item.label" :prop="item.prop">
                    <template v-if="item.btn">
                      <span style="margin-left:-30px;margin-right:45px">{{formData2['cFull']}}</span>
                        <el-button type="text" @click="selectAginst">点击选择交易对手</el-button>
                    </template>
                    <template v-else>{{formData2[item.prop] ? formData2[item.prop] : '暂无数据'}}</template>
                    </el-form-item>
           </el-form>
      </div>
     
      <div>
        <div class="tableTitle">交易详情</div>
        <formList :formData = 'formData' @selectChange='changeDir' :formList = 'formList' parentClass = 'formll'></formList>
      </div>
        <div class="tablecon second" style="width: 98%">
         <div class="tableTitle">质押品列表：</div>
        <el-table :data="pledgeData" border style="width: 100%">
          <el-table-column prop="code" label="债券代码"  align="center"></el-table-column>
          <el-table-column prop="fullName" label="债券全称"  align="center"></el-table-column>
          <el-table-column prop="simpleName" label="债券简称"  align="center"></el-table-column>
         
          <el-table-column prop="variety" label="债券品种" align="center"></el-table-column>
          <el-table-column prop="sumMoney" label="质押券面总额(万元)" align="center"></el-table-column>
          <el-table-column prop="ratio" label="折算比例(%)" align="center"></el-table-column>
          <el-table-column prop="settlementAmount" label="结算金额(万元)" align="center"></el-table-column>
          
        </el-table>
      </div>
      <div class="addProduct" style="width: 98%">
          <el-button type='text' style="margin-left:50px" @click="addProduct">添加质押品</el-button>
      </div>
      <div class="riskTip" style="width: 98%">
            <div class="fxtq tableTitle"><span style="color:red">*</span>申请事由：</div>
            <div class="fxcon">
              <el-input type="textarea" placeholder="请输入申请事由" v-model="reason"></el-input>
            </div>
        </div>
      <el-dialog title="选择下一待办人" class="nextUser" :visible.sync="nextManager" width="30%" center>
        <div v-show="nextManager">
           <el-radio-group v-model="nextUserId">
            <el-radio v-for="item in tableData" :key="item.id"  :label="item.id">
              <span class="user_name">{{item.name}}</span>
              <span class="user_part">{{item.department}}</span>
              </el-radio>
          </el-radio-group>
          
        </div>
          <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="addApply" size="small">确认</el-button>
          <el-button @click="cancleNext"  size="small">取 消</el-button>
      </span>
      </el-dialog>
      <div class="btn">
        <el-button type="primary" size="small" @click="storage">暂存</el-button>
        <el-button type="primary"  size="small" :disabled="btndisabled" @click="submitPost">{{btntext}}</el-button>
        <el-button type="primary" @click="goback" size="small">取消</el-button>
      </div>
    </div>
    <el-dialog :title="diatitle" :visible.sync="centerDialogVisible"  center>
      <div class="DiaFxcon">
        <p>{{tishiMessage}}</p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getFlow" size="small">继续</el-button>
        <el-button @click="centerDialogVisible = false" size="small">取 消</el-button>
      </span>
    </el-dialog>
 
  </div>
</template>

<script>
export default {
  name: "accountDetail",
  data() {
    return {
      centerDialogVisible: false,
      nextManager: false,
      tableData: [],
      nextUserId: '',
      step: 1,
      isAuthorization: 2,
      btndisabled:false,
      btntext: '提交',
      rules:{},
      tishiMessage:'',
      formList1: [
        {label: '机构编号', prop: 'bankNo', value:''},{label: '机构名称', prop: 'bank', value:''},
        {label: '操作员工号', prop: 'jobNum', value:''},{label: '操作员姓名', prop: 'name', value:''},
      ],
      formData1: {},
      formList2: [
        {label: '交易对手', prop: '', value:'', btn: true},{label: '交易机构类型', prop: 'cType', value:''},
        {label: '业务类型', prop: 'caType', value:''},{label: '开户行', prop: 'openBank', value:''},
        {label: '账户名称', prop: 'accountName', value:''},{label: '账号', prop: 'number', value:''},
        {label: '支付系统行号', prop: 'payment', value:''},{label: '托管机构', prop: 'trusteeship', value:''},
        {label: '托管账户名称', prop: 'trusteeshipAccountName', value:''},{label: '托管账号', prop: 'managedAccount', value:''},
      ],
      formData2: {},
     
      formData:{
        totalFace:'',
        currency: 'CNY'
      },
      formList: [
        {label : '交易类型', value:'hhh', prop:'type', select: true,
        options: [
            {label: '质押式', value: '质押式'},
            {label: '买断式', value: '买断式'}
           
        ]},
        {label : '交易方向', value:'hhh', prop:'direction', select: true,
         options: [
            {label: '正回购', value: '正回购'},
            {label: '逆回购', value: '逆回购'}
           
        ]},
        {label : '券面总额（万元）', value:'', disabled: true, prop:'totalFace',input: true},
        {label : '币种', value:'hhh', prop:'currency', select: true,
        options: [
            {label: 'CNY', value: 'CNY'},{label: 'USD', value: 'USD'},
            {label: 'HKD', value: 'HKD'},{label: 'EUR', value: 'EUR'},
            {label: 'GBP', value: 'GBP'},{label: 'AUD', value: 'AUD'},
            {label: 'JPY', value: 'JPY'},{label: 'CAD', value: 'CAD'},
           
        ]},
        {label : '回购利率（%）', value:'', prop:'repoRate',input: true}, 
        {label : '交易日期', value:'', prop:'transactionDate',date: true}, 
        {label : '清算速度', value:'', prop:'clearSpeed', select: true,
         options: [
            {label: 'T+0', value: 'T+0'},
            {label: 'T+1', value: 'T+1'}
        ]},
        {label : '回购期限(天)', value:'', prop:'repoTerm',input: true},
        {label : '首次结算日', value:'', prop:'firstSettlement',date: true},
         {label : '到期结算日', value:'', prop:'endSettlement',date: true},
      
        {label : '计息基础', value:'hhh', prop:'basicRate', select: true,
         options: [
            {label: 'A/365', value: 'A/365'},
        ]},
        
        {label : '交易品种', value:'是', prop:'tradingVarieties',select: true,
        options: [
            {label: 'R001', value: 'R001'},
            {label: 'R007', value: 'R007'},
            {label: 'R014', value: 'R014'},
            {label: 'R021', value: 'R021'},
            {label: 'R1M', value: 'R1M'},
            {label: 'R2M', value: 'R2M'},
            {label: 'R3M', value: 'R3M'},
            {label: 'R4M', value: 'R4M'},
            {label: 'R5M', value: 'R5M'},
            {label: 'R6M', value: 'R6M'},{label: 'R9M', value: 'R9M'},{label: 'R1Y', value: 'R1Y'},
        ]},
       
      ],
      pledgeData: [],
      diatitle: '',
      reason: ''
    };
  },
  created() {
  },
  methods: {
    storage() {
      this.formData2.caId = sessionStorage.getItem('counterpartyAccountId')
        let obj = {
          formData2: this.formData2,
          formData: this.formData,
          pledgeData: this.pledgeData,
          reason: this.reason,
          pledgeId: sessionStorage.getItem('strdata')
        }
        let param = {
        model: '债券回购交易',
        counterparty: this.formData2.cFull,
        applyMessage: JSON.stringify(obj)
      }
      if(sessionStorage.getItem('storageId')) {
          param.id = sessionStorage.getItem('storageId')
        }
      this.axios.post('/applyTemporary/addOrUpdate', param).then(res => {
        this.$message({
          type: 'success',
          message: '暂存成功'
        })
        this.$router.push('transaction')
      })
    },
    goback() {
      this.clearSession()
      this.$router.push('transaction')
      
    },
   
    cancleNext() {
      this.nextManager = false;
      this.btndisabled = false;
    },
   
    getStorageDetail() {
      // 暂存详情
      let param = {
        id: sessionStorage.getItem('storageId')
      }
      this.axios.get('applyTemporary/selectById', {
        params: param
      }).then(res => {
          //let {this.formData2} = res.data.data
          let {reason, formData2, formData, pledgeData, pledgeId} = res.data.data
       
         this.formData2 = formData2 
         this.formData = formData
         this.pledgeData = pledgeData
         this.reason = reason
         this.formData.pledgeId = pledgeId

         this.formData.counterpartyAccountId = formData2.caId
         this.formData.counterpartyId = formData2.cid

         let isCounter = sessionStorage.getItem('counterpartyAccountId')
        if(isCounter){
              this.getOppoAccountInfo()
          }
          let strdata = sessionStorage.getItem('strdata')
          if(strdata) {
            this.getPleList(strdata)
          }
          // 质押品返回时原有的表单信息
          let zqhg = sessionStorage.getItem('zqhg')
          if(zqhg) {
          this.formData = JSON.parse(zqhg)
          }
      })
    },
    changeDir(val) {
      if(val == '正回购' || val == '逆回购') {
        sessionStorage.removeItem('strdata')
        this.pledgeData = []
      }
       
    },
    submitPost() {

      if(this.reason == '') {
          this.$message({
            type: 'warning',
            message: '请输入申请事由'
          })
          return
      }
      let data = Object.assign(this.formList)
          let formda = this.formData
          for(let i = 0; i< data.length; i++) {
       
            if(formda[data[i].prop] == undefined || formda[data[i].prop] == '') {
                this.$message({
                  type: 'warning',
                  message: data[i].label + "不可为空"
              })
             return false
            }
          }
      if(this.step == 1){
        //第一步
          let param = {
            counterpartyId: sessionStorage.getItem('counterpartyId') ? sessionStorage.getItem('counterpartyId') : this.formData2.cid,
            totalFace: this.formData['totalFace'],
            direction: this.formData['direction'],
            ids: sessionStorage.getItem('strdata') ? sessionStorage.getItem('strdata') : this.formData.pledgeId
          }
      this.axios.get('bondRepurchaseApply/checkRisk', {params: param}).then((res) => {
         
          let data = res.data.data
          
          switch(data.state) {
            case '1':  this.$message({
                          type: 'warning',
                          message: data.msg
                        });break;
           case '2': this.isAuthorization = 1;
                      this.tishiMessage = data.msg
                      this.centerDialogVisible = true;
                      this.diatitle = '省联社授权提醒'
                      break;
          case '3':  
                      this.$message({
                        type: 'warning',
                        message: data.msg
                      });
                      this.tishiMessage = data.msg
                      this.centerDialogVisible = true;
                      this.diatitle = '风险预警提醒'
                      break;
            case '4': 
                      //弹出下一列表
                      this.nextManager = true;
                      this.getNextUser()
                      break;
            case '5': 
                      this.$message({
                        type: 'warning',
                        message: data.msg
                      });
                      break;
            case '6': 
                      this.$message({
                        type: 'warning',
                        message: data.msg
                      });
                      break;
            default: break;
          }
      })
      }
    },
    addProduct() {
        if(this.formData.direction == '' || this.formData.direction == undefined) {
          this.$message({
            type: 'warning',
            message: '请选择交易方向'
          })
        } else {
          this.formData.reason = this.reason
          sessionStorage.setItem('zqhg', JSON.stringify(this.formData))
          if(sessionStorage.getItem('strdata')) {
            sessionStorage.setItem('pledata', JSON.stringify(this.pledgeData))
          }
          this.$router.push({path: 'addProducts', query:{direction: this.formData.direction}})
        }
        
    },
 
    addApply() {
      
        //获取下一办理人成功
          //添加债券回购
        if(sessionStorage.getItem('counterpartyId')) {
          this.formData.counterpartyAccountId = sessionStorage.getItem('counterpartyAccountId')
          this.formData.counterpartyId = sessionStorage.getItem('counterpartyId')
        }
        if(sessionStorage.getItem('strdata')) {
          this.formData.pledgeId = sessionStorage.getItem('strdata')
        }
        this.formData.nextUserId = this.nextUserId
        if(this.isAuthorization == 1 ){
          this.formData.isAuthorization = 1
        }else {
          this.formData.isAuthorization = 2
        }
 
       this.formData.reason = this.reason
       if(this.tishiMessage != '') {
         this.formData.warn = this.tishiMessage
       }
        this.axios.post('bondRepurchaseApply/addBondRepurchaseApply', this.formData).then(res =>{
          if(res.data.code == 200) {
              this.$message({
              type: 'success',
              message: '提交成功'
            })
            this.delStorage()
            this.clearSession()

           this.$router.go(-1)
          }else {
            this.$message({
              type: 'error',
              message:'服务器出错或信息填写错误'
            })
          }
          
        })
    },
    delStorage() {
           let param = {
              id:  Number(sessionStorage.getItem('storageId'))
            }
            this.axios.post('applyTemporary/deleteById', param).then(res => {
              
            })
    },
    getNextUser(flowId) {
      let param = {
        roleName: '交易员',
        flowId: flowId
      }
      this.axios.get('bondRepurchaseApply/getNextUser', {
        params: param
      }).then((res) => {
          this.tableData = res.data.data.nextUser
          
      })
    },
    getFlow() {
      // 开始第二步
       this.centerDialogVisible = false;
       this.btntext = '查看待办人';
        this.nextManager = true;
        this.getNextUser()
    },
    getOppoAccountInfo() {
      //交易对手账户信息
      let param = {
        caId: sessionStorage.getItem('counterpartyAccountId')
      }
      this.axios.get('counterparty/selectByCid', {params: param}).then((res) => {
        
        this.formData2 = res.data.data
      })
    },
    getPleList(val) {
      // 获取质押品
      let param = {
        ids: val
      }
      let totalMoney = 0;
      this.axios.get('pledge/selectById', {params: param}).then((res => {
        this.pledgeData = res.data.data
        this.pledgeData.map(item => {
            totalMoney += Number(item.sumMoney)
        })
        this.formData['totalFace'] = totalMoney
      }))
    },
    close() {
      this.$router.go(-1);
    },
    gozs() {
      this.$router.push('chooseZhai');
    },
    selectAginst(){
      this.$router.push('chooseOpponent')
    },
    clearSession() {
      sessionStorage.removeItem('counterpartyAccountId')
      sessionStorage.removeItem('counterpartyId')
      sessionStorage.removeItem('strdata')
      sessionStorage.removeItem('zqhg')
      sessionStorage.removeItem('storageId  ')
    },
   
  },
  mounted() {
    //申请人信息

    this.formData1 = JSON.parse(sessionStorage.getItem('user'))
    // 暂存详情
    if(sessionStorage.getItem('storageId')) {
      this.getStorageDetail()
    } else {
        // 交易对手
       let isCounter = sessionStorage.getItem('counterpartyAccountId')
       if(isCounter){
            this.getOppoAccountInfo()
        }
        let strdata = sessionStorage.getItem('strdata')
        if(strdata) {
          this.getPleList(strdata)
        }
        // 质押品返回时原有的表单信息
        let zqhg = sessionStorage.getItem('zqhg')
        if(zqhg) {
         this.formData = JSON.parse(zqhg)
         this.reason = this.formData.reason
        }

    }

    
  },

};
</script>

<style lang="scss">
#zqhgApply {
.el-dialog{
  background: white
}
 .addProduct{
         border: 1px solid white;
    border-top: 0;
    height: 50px;
    line-height: 50px;
    background: white;
 }
  .tableBox {
    padding-top: 10;
    color: white;
    .formlist{
      .el-form-item{
        width:49%;
        margin:0;
        border: 1px solid white;
        .el-form-item__label, .el-form-item__content{
            padding: 6px 2px;
            border-right: 1px solid white;
        }
        .el-form-item__label{
          text-align: center;
            width:45%;
            box-sizing: border-box;
            background: rgba(53,58,58,0.8);
            color:white;
        }
        .el-form-item__content{
          width:55%;
          box-sizing: border-box;
          text-align: center;
          background: rgba(53,58,58,0.55);
          
        }
      }
    }
    .el-table__empty-text{
      color:white;
    }
    .tableTitle {
      line-height: 36px;
      padding-left: 20px;
      margin: 12px 0;
    }
    table {
      
      border: 1px solid white;
      width: 100%;
      text-align: center;
      border-collapse: collapse;
       .el-table tr{
          background: transparent;
      }
      // margin-bottom: 20px;
      tr {
        td {
          
          &:nth-child(odd) {
            background: rgba(53, 58, 58, 0.55);
          }
          &:nth-child(even) {
            background: rgba(53, 58, 58, 0.55);
          }
        }
      }
    }
    .riskTip {
      .fxtq {
        margin-bottom: 20px;
      }
      .fxcon {
        border: 1px solid white;
        background-color: #4d534e;
        padding: 20px;
        margin-bottom: 20px;
      }
    }
    .btn {
      text-align: center;
      margin-top:20px;
    }
  }
  .DiaFxcon {
    background-color: white;
    padding: 20px 10px;
    margin-bottom: 20px;
  }
  .el-radio-group{
    width:100%;
    height: 320px;
    overflow-y: scroll;
    .el-radio{
      margin-bottom: 15px;
      width: 100%;
      display: block;
       .el-radio__label {
        width: 80%;
        display: inline-block;
          
        .user_name, .user_part {
              padding: 15px;
              width: 48%;
              display: inline-block;
              text-align: center;
              border: 1px solid #efefef
            }
      }  
     
    }
     .el-radio+.el-radio{
        margin-left: 0
      }
  }
  
 
}
</style>
